<template>
	<view class="control">
		<view class="box-2">
			<view class="data-list1">
				<scroll-view scroll-y="true" class="scroll">
					<view class="data-item flex-align" v-for="(item, index) in 3" :key="index" @click="siteclick">
						<view class="image">
							<image :src="site_img" style="width: 200rpx;height: 150rpx;" mode=""></image>
						</view>
						<view class="detail">
							<view>
								<view class="title ellipsis-1">场地</view>
							</view>
							<view class="flex-between">
								<price :value="100" :color="'#ff0000'"></price>
								<!-- <view class="price-2" style="text-decoration: line-through">￥45</view> -->
								<!-- <view
									style="margin-left:auto;color: #ffffff;font-size: 24rpx;background-color: #ffaa00;padding: 10rpx 20rpx;border-radius: 30rpx;">
									订场</view> -->
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- <view  style="position: absolute;top: 0rpx; left: 30%;">
				<u-empty mode="list" text="暂无类目,看看其他商品吧~"
					:icon="zanwu_img">
				</u-empty>
			</view> -->

		</view>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
	export default {
		components: {
			QSNavbar,
			uniRate,
		},
		data() {
			return {
				site_img: this.$https.assetsPath + "image12.png",
				zanwu_img: this.$https.assetsPath + "image22.png",
				page: 1,
				cateslist: [{
						id: 74,
						name: "游泳"
					},
					{
						id: 75,
						name: "健身"
					}
				],
				scc: '田径',
				data_name: [],
				homeData: [
					this.$https.assetsPath + "image16.jpg",
					this.$https.assetsPath + "image17.jpg",
				],
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				list1: [],
				venueDetail: {},
				timeData: {},
				menuActive: 0,
				products: [],
				id: 0,
				time_list: '',
				each_num: {
					open_time_start: '',
					open_time_end: '',
				},
				windows: '',
				venueDetaillist: [{
						belong: "card",
						icon: this.$https.assetsPath + "image25.png",
						name: "会员办卡",
						name_sign: 0,
					},
					{
						belong: "ticket",
						icon: this.$https.assetsPath + "image25.png",
						name: "门票购买",
						name_sign: 1,
					},
					{
						belong: "court",
						icon: this.$https.assetsPath + "image25.png",
						name: "场地预约",
						name_sign: 2,
					}
				],
				belonglist: {},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				index_list: {},
				venuelits: {
					address: "北京西路18号二楼",
					venue_name: "室外篮球场",
					projects: [{
						name: "体育场馆"
					}, {
						name: "篮球"
					}]
				},
				catelist_belong: '',
				currentTab: 0
			};
		},
		onLoad(options) {
			this.id = options.id;
			// this.getVenueDetail(options.id);
			// this.getRecommendVenueDetail(options.id)

		},
		methods: {
			// onClickTab(e,index) {
			// 	console.log(e, '123')
			// 	if (e.name_sign = 0) {
			// 		this.currentTab = 0
			// 	} else if (e.name_sign = 1) {
			// 		console.log(123)
			// 		this.currentTab = 1
			// 	} else if (e.name_sign = 2) {
			// 		this.currentTab = 2
			// 	}
			// },
			onClickTab({
				index
			}) {
				this.currentTab = index;
			},
			// 获取推荐场馆信息
			async getRecommendVenueDetail(id) {
				let postData = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					venue_id: id
				};
				let result = await venues.getRecommendVenueDetail(postData);
				if (result.code === 1) {
					this.venuelits = result.data.result.venue
					this.cateslist = result.data.result.projects.slice(0, 3)
					this.homeData = result.data.result.venue.banner
				}
			},
			// 导航
			addresslist() {
				uni.openLocation({
					latitude: Number(this.venueDetail.lat), //要去的纬度-地址
					longitude: Number(this.venueDetail.lng), //要去的经度-地址
					address: this.venueDetail.address, //要去的具体地址

					//此处踩坑的问题2：
					//latitude 和 longitude的值一定要是number类型。
					//所以传递的时候需要使用Number将其转换一下。
				})
			},
			siteclick(){
				uni.navigateTo({
					url:'/page_venues/stadium/stadium'
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		// min-height: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.box-2 {
		padding: 0px 20rpx;
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		// transform: translateY(-60rpx);

		>view {
			flex: 1;
			height: 0;

			.scroll {
				// height: calc(100% - 40rpx);
				height: 100%;
			}
		}

		// 列表1
		.data-list1 {
			.data-item {
				margin-top: 20rpx;
				height: 200rpx;
				width: 96%;
				background-color: #ffffff;
				padding: 10rpx;
				border: 0.1rpx linear-gradient(190deg, #FFF, #FFF) solid;
				border-radius: 6rpx;
				// box-shadow: 30px 2px 10px #f1f1f1;
				box-shadow: 0px 0px 8.9rpx 1.1rpx rgba(0, 0, 0, 0.06);
				margin-left: 2%;

				.image {
					padding-left: 10rpx;
					width: 200rpx;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 120rpx;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.title {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						font-weight: bold;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							color: white;
							background-color: #abc6fa;
							margin-right: 10rpx;
						}
					}

					.tiemr {
						color: #cfcfcf;
						font-size: 22rpx;
					}

					.price {
						font-size: 32rpx;
						color: #ff4811;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #cfcfcf;
						font-size: 22rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>